Next.js App Directory: failipõhine marsruutimise revolutsioon

Next.js on pidevalt nihutanud veebiarenduse piire, pakkudes arendajatele võimsaid tööriistu ja funktsioone jõudluse, skaleeritavuse ja kasutajasõbralike rakenduste loomiseks. App Directory kasutuselevõtt on märkimisväärne samm edasi, eriti selle uuendusliku lähenemisega failipõhisele marsruutimisele. See artikkel süveneb App Directory marsruutimismehhanismi, uurides selle eeliseid, põhimõisteid ja praktilisi mõjusid tänapäevaste veebirakenduste loomisel Next.js-iga.

Next.js-i marsruutimise arengu mõistmine

Enne App Directory't tugines Next.js marsruutimiseks Pages Directory'le. Kuigi see oli tõhus, oli sellel lähenemisel teatud piirangud. Pages Directory kasutas lihtsat failipõhist marsruutimissüsteemi, kus iga fail `pages` kaustas vastas marsruudile. Näiteks `pages/about.js` vastaks marsruudile `/about`.

Kuigi see oli otsekohene, puudus Pages Directory'l sisseehitatud tugi keerukatele paigutustele, andmete pärimise strateegiatele ja serveripoolse renderdamise mustritele, mis nõudis arendajatelt sageli nende funktsioonide käsitsi rakendamist. Lisaks võis andmete pärimise ja komponentide renderdamise tihe sidumine mõnikord põhjustada jõudluse kitsaskohti.

App Directory lahendab need piirangud, tutvustades paindlikumat ja võimsamat marsruutimissüsteemi, mis põhineb Reacti serverikomponentidel, paigutustel ja muudel täiustatud funktsioonidel. See liigub kaugemale lihtsast faili-marsruudi vastavusest ja pakub deklaratiivsemat ja komponeeritavamat lähenemist rakenduste marsruutide ja paigutuste määratlemisele.

App Directory tutvustus: uus paradigma marsruutimiseks

App Directory, mis asub teie Next.js projekti juurkaustas `app` kausta sees, tutvustab põhimõtteliselt erinevat lähenemist marsruutimisele. Selle asemel, et faile otse marsruutidele vastendada, kasutab App Directory konventsioonipõhist süsteemi, kus kataloogide struktuur ja spetsiaalsed failid määravad rakenduse marsruudid.

See lähenemine pakub mitmeid olulisi eeliseid:

• Parem organiseeritus: App Directory hierarhiline struktuur soodustab paremat organiseeritust ja koodi hooldatavust. Saate grupeerida seotud komponente ja marsruute loogiliselt alamkataloogidesse.
• Parem jõudlus: Reacti serverikomponentide ja täiustatud andmete pärimise võimaluste abil võimaldab App Directory arendajatel optimeerida jõudlust ja vähendada kliendipoolset JavaScripti.
• Deklaratiivne marsruutimine: App Directory failipõhine lähenemine võimaldab arendajatel määratleda marsruute ja paigutusi deklaratiivselt, muutes rakenduse struktuuri läbipaistvamaks ja kergemini mõistetavaks.
• Sisseehitatud paigutused ja mallid: App Directory pakub sisseehitatud tuge paigutuste ja mallide määratlemiseks, mida jagatakse mitme lehe vahel, vähendades koodi dubleerimist ja parandades järjepidevust.

App Directory marsruutimissüsteemi põhimõisted

App Directory marsruutimissüsteemi tõhusaks kasutamiseks on oluline mõista selle funktsionaalsuse aluseks olevaid põhimõisteid:

1. Marsruudisegmendid ja kaustad

Iga kaust `app` kataloogis esindab marsruudisegmenti. Kausta nimi vastab URL-i tee segmendile. Näiteks `app/blog/posts` kaustastruktuur vastaks marsruudile `/blog/posts`.

Vaatleme seda struktuuri:

            app/
  blog/
    posts/
      page.js

            

              
                Copy
              
            
          

See struktuur määratleb marsruudi asukohas `/blog/posts`. Fail `page.js` kaustas `posts` on marsruudisegmendi komponent, mis renderdab selle marsruudi sisu.

2. Fail `page.js`: marsruudi sisu renderdamine

Fail page.js (või page.tsx TypeScripti jaoks) on spetsiaalne fail, mis määratleb konkreetse marsruudisegmendi jaoks renderdatava sisu. See on selle marsruudi sisenemispunkt. See fail peab eksportima Reacti komponendi oma vaikeekspordina.

Näide:

            // app/blog/posts/page.js

export default function PostsPage() {
  return (
    <div>
      <h1>Blogipostitused</h1>
      <p>Siin kuvatakse blogipostituste loend.</p>
    </div>
  );
}

            

              
                Copy
              
            
          

3. Paigutused (Layouts): jagatud kasutajaliidese määratlemine

Paigutused võimaldavad teil määratleda kasutajaliidest, mis on jagatud mitme lehe või marsruudisegmendi vahel. Paigutus võib sisaldada elemente nagu päised, jalused, külgribad või muid komponente, mis peaksid olema teie rakenduse teatud osas ühtsed. Paigutused määratletakse failiga `layout.js` (või `layout.tsx`).

Paigutused on pesastatud. See tähendab, et juurpaigutus (`app/layout.js`) ümbritseb kogu rakendust ja pesastatud paigutused ümbritsevad konkreetseid marsruudisegmente. Paigutust jagavate marsruutide vahel navigeerimisel säilitab Next.js paigutuse oleku ja väldib selle uuesti renderdamist, mis parandab jõudlust ja tagab sujuvama kasutajakogemuse.

Näide:

            // app/layout.js

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <nav>
            <a href="/">Avaleht</a> |
            <a href="/blog">Blogi</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>Autoriõigus 2023</p>
        </footer>
      </body>
    </html>
  );
}

            

              
                Copy
              
            
          

Selles näites määratleb `RootLayout` kogu rakenduse põhilise HTML-struktuuri, päise, jaluse ja navigeerimise. Iga leht, mis renderdatakse `app` kataloogis, ümbritsetakse selle paigutusega.

4. Mallid (Templates): oleku säilitamine marsruutide vahel

Sarnaselt paigutustele ümbritsevad ka mallid alamarsruute. Erinevalt paigutustest loovad mallid aga iga alamarsruudi jaoks uue komponendi eksemplari. See tähendab, et malli olekut ei säilitata malli sees olevate marsruutide vahel navigeerimisel. Mallid on kasulikud stsenaariumide puhul, kus peate marsruudi üleminekutel oleku lähtestama või uuesti initsialiseerima. Mallide loomiseks kasutage faili `template.js` (või `template.tsx`).

5. Marsruudigrupid: marsruutide organiseerimine ilma URL-i segmentideta

Marsruudigrupid võimaldavad teil oma marsruute App Directory's organiseerida ilma URL-i struktuuri mõjutamata. Marsruudigrupid määratletakse, ümbritsedes kaustanimed sulgudega, nt `(group-name)`. Need sulud annavad Next.js-ile teada, et kausta tuleb käsitleda loogilise grupeerimismehhanismina, mitte marsruudisegmendina.

See on eriti kasulik suurte, paljude marsruutidega rakenduste organiseerimiseks. Näiteks võite kasutada marsruudigruppe oma rakenduse erinevate osade eraldamiseks, nagu `(marketing)` ja `(app)`. Need grupid mõjutavad ainult failistruktuuri, mitte URL-i teid.

Näide:

            app/
  (marketing)/
    home/
      page.js  // Juurdepääsetav aadressil /home
    about/
      page.js  // Juurdepääsetav aadressil /about
  (app)/
    dashboard/
      page.js  // Juurdepääsetav aadressil /dashboard

            

              
                Copy
              
            
          

6. Dünaamilised marsruudid: muutuvate segmentide käsitlemine

Dünaamilised marsruudid võimaldavad teil luua muutuva segmendiga marsruute. See on kasulik stsenaariumide puhul, kus peate genereerima marsruute andmete põhjal, näiteks blogipostituste, tootelehtede või kasutajaprofiilide jaoks. Dünaamilised marsruudisegmendid määratletakse, ümbritsedes segmendi nime nurksulgudega, nt `[id]`. `id` esindab parameetrit, millele pääseb juurde `page.js` komponendi sees.

Näide:

            app/
  blog/
    [slug]/
      page.js

            

              
                Copy
              
            
          

Selles näites on `[slug]` dünaamiline marsruudisegment. URL nagu `/blog/my-first-post` vastaks sellele marsruudile ja `slug` parameetri väärtuseks oleks `my-first-post`. Saate `slug` parameetrile juurde pääseda `page.js` komponendis `params` prop'i kaudu.

            // app/blog/[slug]/page.js

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blogipostitus: {slug}</h1>
      <p>Blogipostituse sisu slug'iga: {slug}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Peate genereerima nende dünaamiliste marsruutide võimalikud väärtused. Next.js pakub funktsiooni `generateStaticParams` staatilise saidi genereerimiseks (SSG) ja serveripoolseks renderdamiseks (SSR). See funktsioon võimaldab teil määrata, millised dünaamilised marsruudid tuleks ehitamise ajal eelrenderdada.

            // app/blog/[slug]/page.js

export async function generateStaticParams() {
  const posts = [
    { slug: 'my-first-post' },
    { slug: 'my-second-post' },
  ];

  return posts.map((post) => ({ slug: post.slug }));
}

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blogipostitus: {slug}</h1>
      <p>Blogipostituse sisu slug'iga: {slug}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

7. Kõikehõlmavad segmendid (Catch-All): tundmatute marsruutide käsitlemine

Kõikehõlmavad segmendid on dünaamilise marsruudi tüüp, mis võimaldab teil sobitada URL-is suvalise arvu segmente. Need määratletakse, lisades segmendi nime ette kolm punkti, nt `[...path]`. Kõikehõlmavad segmendid on kasulikud paindlike marsruutide loomiseks, mis suudavad käsitleda erinevaid URL-i struktuure.

Näide:

            app/
  docs/
    [...path]/
      page.js

            

              
                Copy
              
            
          

Selles näites on `[...path]` kõikehõlmav segment. URL-id nagu `/docs/introduction`, `/docs/api/reference` ja `/docs/examples/basic` vastaksid kõik sellele marsruudile. Parameeter `path` oleks massiiv, mis sisaldab sobitatud segmente.

            // app/docs/[...path]/page.js

export default function DocsPage({ params }) {
  const { path } = params;
  return (
    <div>
      <h1>Dokumentatsioon</h1>
      <p>Tee: {path.join('/')}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

8. Paralleelsed marsruudid: mitme lehe samaaegne renderdamine

Paralleelsed marsruudid võimaldavad teil renderdada mitu lehte samaaegselt samas paigutuses. See on eriti kasulik keerukate kasutajaliidese mustrite loomiseks, näiteks mitme paneeliga armatuurlaudade või modaalakende jaoks, mis ilmuvad praeguse lehe peale. Paralleelsed marsruudid määratletakse sümboli @ abil, nt `@children`, `@modal`. Neid saab määrata otse URL-is või navigeerida nende juurde `useRouter` hook'i abil.

Näide:

            app/
  @children/
    page.js // Renderdab põhisisu
  @modal/
    login/
      page.js // Renderdab sisselogimise modaalakna

            

              
                Copy
              
            
          

Paralleelsete marsruutide kuvamiseks kasutage komponenti ``.

9. Pealtkuulavad marsruudid (Intercepting): keerukate kasutajaliidese üleminekute loomine

Pealtkuulavad marsruudid võimaldavad teil laadida marsruudi teisest rakenduse osast praeguse marsruudi kontekstis. Seda saab kasutada keerukate kasutajaliidese üleminekute loomiseks, näiteks modaalakna kuvamiseks lingile klõpsates ilma praeguselt lehelt lahkumata. Need määratletakse süntaksiga (...).

Andmete pärimine App Directory's

App Directory tutvustab uusi ja täiustatud viise andmete pärimiseks, kasutades Reacti serverikomponente ja `fetch` API-d koos sisseehitatud vahemälu ja revalideerimise võimalustega. See toob kaasa parema jõudluse ja sujuvama arenduskogemuse. Nii serveri- kui ka kliendikomponendid saavad andmeid pärida, kuid strateegia on erinev.

1. Andmete pärimine serverikomponentides

Serverikomponendid, mis on App Directory's vaikimisi, saavad andmeid pärida otse andmebaasidest või API-dest. Seda tehakse komponendi funktsiooni sees enne renderdamist. Kuna serverikomponendid käivitatakse serveris, saate turvaliselt lisada salajasi võtmeid ja mandaate ilma neid kliendile paljastamata. `fetch` API on automaatselt memoiseeritud, mis tähendab, et identsed andmepäringud deduplitseeritakse, parandades veelgi jõudlust.

            // app/page.js

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  // Tagastatud väärtust *ei* serialiseerita
  // Saate tagastada Date, Map, Set jne.

  if (!res.ok) {
    // See aktiveerib lähima `error.js` Error Boundary
    throw new Error('Andmete pärimine ebaõnnestus');
  }

  return res.json();
}

export default async function Page() {
  const data = await getData();

  return <div>{data.title}</div>;
}

            

              
                Copy
              
            
          

2. Andmete pärimine kliendikomponentides

Kliendikomponendid, millele viitab direktiiv 'use client' faili ülaosas, käivitatakse kasutaja brauseris. Andmete pärimine kliendikomponentides hõlmab tavaliselt `useEffect` hook'i ja teegi, nagu `axios` või `fetch` API, kasutamist. Server Actions pakub turvalist viisi serveriandmete muutmiseks kliendikomponentidest. See pakub kliendikomponentidele turvalise viisi serveris olevate andmetega suhtlemiseks ilma API lõpp-punkte otse paljastamata.

            // app/components/ClientComponent.js
'use client';

import { useState, useEffect } from 'react';

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const data = await res.json();
      setData(data);
    }

    fetchData();
  }, []);

  if (!data) {
    return <div>Laadimine...</div>;
  }

  return <div>{data.title}</div>;
}

            

              
                Copy
              
            
          

SEO kaalutlused App Directory'ga

App Directory serverikeskne lähenemine pakub olulisi eeliseid SEO jaoks. Kuna sisu renderdatakse serveris, saavad otsingumootorite roomikud lehe sisule kergesti juurde pääseda ja seda indekseerida. Siin on mõned olulised SEO kaalutlused:

• Metaandmed: Kasutage oma paigutustes ja lehtedel <head> silti metaandmete, nagu pealkiri, kirjeldus ja märksõnad, määratlemiseks. Next.js pakub sisseehitatud tuge metaandmete haldamiseks `Metadata` API kaudu.
• Semantiline HTML: Kasutage semantilisi HTML-elemente (nt <article>, <nav>, <aside>), et oma sisu loogiliselt struktureerida ja pakkuda otsingumootoritele konteksti.
• Juurdepääsetavus: Veenduge, et teie rakendus oleks juurdepääsetav puuetega kasutajatele. See hõlmab alternatiivteksti pakkumist piltidele, õige pealkirjade hierarhia kasutamist ja piisava värvikontrasti tagamist.
• Jõudlus: Optimeerige oma rakenduse jõudlust, et parandada kasutajakogemust ja otsingumootorite asetusi. See hõlmab kliendipoolse JavaScripti minimeerimist, piltide optimeerimist ja vahemälu kasutamist.

App Directory marsruutimissüsteemi kasutamise eelised

Praktilised näited App Directory marsruutimisest

1. Lihtsa blogi loomine dünaamiliste marsruutidega

2. Modaalakna rakendamine pealtkuulavate marsruutidega

3. Armatuurlaua paigutuse loomine paralleelsete marsruutidega

Selles struktuuris esindavad `@analytics` ja `@settings` paralleelseid marsruute, mis renderdatakse peamises armatuurlaua paigutuses. Igal paralleelsel marsruudil on oma page.js fail, mis määratleb selle paneeli sisu. Paigutus saab otsustada, kuhu need paigutada, kasutades komponenti <Slot>.

Pages Directory'st App Directory'sse migreerimine

Olemasoleva Next.js rakenduse migreerimine Pages Directory'st App Directory'sse nõuab hoolikat planeerimist ja teostust. Kuigi App Directory pakub olulisi eeliseid, tutvustab see ka uusi kontseptsioone ja mustreid, mida arendajad peavad mõistma. Siin on samm-sammuline juhend, mis aitab teid migratsiooniprotsessis:

1. Mõistke põhilisi erinevusi: Enne migratsiooni alustamist veenduge, et mõistate põhjalikult Pages Directory ja App Directory peamisi erinevusi, sealhulgas marsruutimissüsteemi, andmete pärimist ja komponentide arhitektuuri.
2. Looge `app` kaust: Looge oma Next.js projekti juurkausta uus kataloog nimega `app`. Selles kataloogis hakkavad asuma kõik App Directory'sse kuuluvad komponendid ja marsruudid.
3. Migreerige marsruudid järk-järgult: Alustage marsruutide migreerimisega järk-järgult, ükshaaval. See võimaldab teil iga marsruuti eraldi testida ja siluda, minimeerides vigade tekkimise riski.
4. Teisendage komponendid serverikomponentideks: Teisendage oma olemasolevad Reacti komponendid võimaluse korral serverikomponentideks. See parandab jõudlust ja vähendab JavaScripti hulka, mida on vaja brauseris alla laadida ja käivitada.
5. Uuendage andmete pärimise loogikat: Uuendage oma andmete pärimise loogikat, et kasutada ära App Directory sisseehitatud andmete pärimise võimalusi. See võib hõlmata andmete pärimise koodi teisaldamist kliendikomponentidest serverikomponentidesse.
6. Rakendage paigutused ja mallid: Rakendage paigutused ja mallid, et määratleda jagatud kasutajaliidese elemente, mis on mitmel lehel ühtsed.
7. Testige põhjalikult: Testige iga migreeritud marsruuti põhjalikult, et veenduda, et see toimib õigesti ja et regressioone ei esine.
8. Eemaldage `pages` kaust: Kui kõik marsruudid on migreeritud, saate eemaldada `/pages` kausta.

Kokkuvõte

Kuna Next.js ökosüsteem areneb edasi, on App Directory'st saamas standard robustsete, skaleeritavate ja jõudluslike veebirakenduste ehitamiseks. Võtke muutus omaks, uurige võimalusi ja avage Next.js'i täielik potentsiaal!